<!--录屏-->
<template>
  <div class="container">
        <video
          id="video"
          autoplay
          style="display: none; background-color: #000"
          
        ></video>
        <canvas id="canvas"></canvas>
        <canvas id="canvas_bg" style="display: none"></canvas>
        <img id="imgXX" src="" />

        <section class="item">
          <button class="media-btn" @click="takePhoto">拍照</button>
          <input type="color" @input="changeBgColor(this.value)" value="#0066cc" />
        </section>
      </div>
</template>

<script setup>
import { reactive, toRefs, onMounted,nextTick } from "vue";
import { useRouter } from "vue-router";
import "@/assets/js/37.js";
import "@/assets/js/tf.min.js";
// import { useHomeStore } from "@/stores/home";
// const store = useHomeStore()
const router = useRouter();
const data = reactive({});
const {} = toRefs(data);
const handleClose = () => {
  router.push("/");
};
nextTick(()=>{
// const cvs = document.getElementById("canvas");
// const video = document.getElementById("video");
// const canvasBg = document.getElementById("canvas_bg");
// cvs.width = 
// cvs.height = 
// video.width = 
// video.height = 
// canvasBg.width = 
// canvasBg.height = 300;
  //  changeBgColor()

})
// const cvs = document.getElementById("canvas");
// const video = document.getElementById("video");
// const canvasBg = document.getElementById("canvas_bg");
// let w = 300;
// cvs.width = '300px';
// cvs.height = '300px';
// video.width = '300px';
// video.height = '300px';
// canvasBg.width = '300px';
// canvasBg.height = '300px';
   
// let ctxBg = canvasBg.getContext("2d");
// const changeBgColor = (v)=> {
//   // const canvasBg = document.querySelector('#canvas_bg')
//   // const ctxBg = canvasBg.getContext('2d')
 
//   ctxBg.clearRect(0, 0, cvs.width, cvs.height);
//   ctxBg.fillStyle = v || "#06c";
//   ctxBg.fillRect(0, 0, cvs.width, cvs.height);
// }
// const takePhoto = (e) => {
//   document.getElementById("imgXX").src = canvas.toDataURL("image/png");
//   // a.href = canvas.toDataURL();
//   // a.setAttribute('download', 'handsome');
//   // 创建一个 a 标签，并设置 href 和 download 属性
//   const el = document.createElement("a");
//   // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
//   el.href = canvas.toDataURL();
//   el.download = new Date().toLocaleString();

//   // 创建一个点击事件并对 a 标签进行触发
//   const event = new MouseEvent("click");
//   el.dispatchEvent(event);
// };
// changeBgColor();
// main();
onMounted(() => {
  // let ctxBg = canvasBg.getContext("2d");
});
</script>

<style lang="less" scoped>
.video {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;

  .background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s;
    z-index: -2;
  }
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-dialog {
  border-radius: 20px !important;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/deep/ .el-tabs__item.is-active {
  color: #000 !important;
  font-weight: 600;
}
/deep/ .el-tabs__item:hover {
  color: #000 !important;
}
/deep/ .el-tabs__active-bar {
  background-color: #000 !important;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 0;
  font-size: 20px;
  .ipt {
    position: relative;
    input {
      // border-radius: 10px;
      width: 6.5em;
      color: #000;
      font-size: inherit;
      font-family: inherit;
      // background-color: hsl(236, 32%, 26%);
      background-color: #cccccc70;
      padding: 0.35em 0.45em;
      border: 1px solid transparent;
      transition: background-color 0.3s ease-in-out;
    }

    input:focus {
      outline: none;
    }

    input::placeholder {
      // color: hsla(0, 0%, 100%, 0.6);
      font-size: 15px;
      color: #000;
    }

    span {
      position: absolute;
      background-color: #000;
      transition: transform 0.5s ease;
    }

    .bottom,
    .top {
      height: 1px;
      left: 0;
      right: 0;
      transform: scaleX(0);
    }

    .left,
    .right {
      width: 1px;
      top: 0;
      bottom: 0;
      transform: scaleY(0);
    }

    .bottom {
      bottom: 0;
      transform-origin: bottom right;
    }

    input:focus ~ .bottom {
      transform-origin: bottom left;
      transform: scaleX(1);
    }

    .right {
      right: 0;
      transform-origin: top right;
    }

    input:focus ~ .right {
      transform-origin: bottom right;
      transform: scaleY(1);
    }

    .top {
      top: 0;
      transform-origin: top left;
    }

    input:focus ~ .top {
      transform-origin: top right;
      transform: scaleX(1);
    }

    .left {
      left: 0;
      transform-origin: bottom left;
    }

    input:focus ~ .left {
      transform-origin: top left;
      transform: scaleY(1);
    }
  }
}
.item .unit {
  margin-left: 10px;
}
.item input {
  height: 30px;
  padding: 1px;
  padding-left: 5px;
}
.item input[type="number"] {
  width: 80px;
}
.type-name {
  width: 25%;
}

.media-btn {
  border-radius: 10px;
  z-index: 1;
  position: relative;
  font-size: 17px;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

.media-btn::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.media-btn:hover {
  cursor: pointer;
  color: #161616;
}

.media-btn:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}

.tip {
  background-color: rgb(248, 243, 172);
  display: inline-block;
  padding: 19px;
  font-size: 25px;
  font-weight: 900;
  border-radius: 3px;
  margin-top: 19px;
}
</style>